<template>
	<view
		style="background: url('https://qiniu.dadaozhixing.top/dxx/header-bg.png') no-repeat;background-size: 750upx 366upx;">
		<view class="header" style="
        background: url('https://qiniu.dadaozhixing.top/dxx/header-bg.png');
        height: 366rpx;
      ">
			<view style="margin-top: 88upx">
				<uni-search-bar radius="20" cancelButton="none" @confirm="searchByGoodsName" @input="searchByGoodsName"
					placeholder="请输入商品名称"></uni-search-bar>
			</view>
			<!-- 分类 -->
			<div class="cate-container">
				<div class="cate-section-line1">
					<div class="cate-section">
						<div class="cate-item" v-for="(menu, mIdx) in menuList" :key="mIdx"
							@click="getGoodsList(menu.id)">
							<image :src="menu.icon"></image>
							<text>{{ menu.name }}</text>
						</div>
					</div>
					<div style="
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-top: 20upx;
              height: 100upx;
            " v-if="false" @click="showAllMenuFlag=true">
						<span>全部</span>
						<span>
							<uni-icons type="bars" size="20"></uni-icons>
						</span>
					</div>
				</div>
				<div class="expand-container" v-if="showAllMenuFlag">
					<div class="cate-section-line2">
						<div class="cate-item" v-for="(menu, mIdx) in menuList" :key="mIdx"
							@click="getGoodsList(menu.id)">
							<image :src="menu.icon"></image>
							<text>{{ menu.name }}</text>
						</div>
					</div>
					<button @click="showAllMenuFlag=false"
						style="width: 520upx;height: 72upx;background: #3EB3F3;border-radius: 44rpx;">收起</button>
				</div>
			</div>
		</view>
		<view class="content">
			<scroll-view scroll-y class="left-aside">
				<view v-for="item in goodsList" :key="item.id" class="f-item b-b"
					:class="{ active: item.id === currentGoodsId }" @click="getGoodsList2(item.id)">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll"
				:scroll-top="tabScrollTop">
				<view v-for="item in goodsList2" :key="item.id" class="s-list" :id="'main-' + item.id">
					<view class="t-list">
						<view @click="navToList(item.id)" class="t-item">
							<view class="t-img-box">
								<image :src="item.icon"></image>
							</view>
							<view class="t-info-box">
								<view class="title">{{item.name}}</view>
								<view class="desc" v-if="item.remark">{{item.remark}}</view>
								<view class="price-box">
									<view v-if="hasLogin">
										{{item.unitPrice}}
										<image class="add-to-cart"
											src="https://qiniu.dadaozhixing.top/dxx/pages/product/add_2_cart.png"
											@click.stop="add2Cart(item)"
											></image>
									</view>
									<view v-else style="color: #FF5C5C;font-weight: 600;">登录查看价格</view>
									<view></view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


	</view>
</template>

<script>
	import {
		typeListApi,
		goodsListApi,
		goodsSizeListApi,
		add2CartApi
	} from "@/api/goods";
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 0,
				currentGoodsId: 0,
				flist: [],
				slist: [],
				tlist: [],
				menuList: [],
				goodsList: [],
				goodsList2: [],
				goodsSizeList: [],
				showAllMenuFlag: false
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			this.loadData();
		},
		onShow() {
			let typeId = uni.getStorageSync("typeId")
			console.log("on  show typeId:" + typeId)
			if (typeId) {
				this.currentId = typeId
			} else {
				this.currentId = 1
			}
			this.getGoodsList(this.currentId)
		},
		methods: {
			async loadData() {
				let ret = await typeListApi({
					merId: 1,
					shopId: 1
				});
				this.menuList = ret.data;
				if (this.menuList.length > 0) {
					if (this.currentId == 0) {
						this.currentId = this.menuList[0].id
					}
					this.getGoodsList(this.currentId)
				}
			},
			//一级分类点击
			tabtap(item) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}

				this.currentId = item.id;
				let index = this.slist.findIndex((sitem) => sitem.pid === item.id);
				// this.tabScrollTop = this.slist[index].top;
				this.getGoodsSizeList(item.id)
			},
			//右侧栏滚动
			asideScroll(e) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter((item) => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.currentId = tabs[0].pid;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.slist.forEach((item) => {
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view
						.fields({
								size: true,
							},
							(data) => {
								item.top = h;
								h += data.height;
								item.bottom = h;
							}
						)
						.exec();
				});
				this.sizeCalcState = true;
			},
			navToList(goodsId) {
				uni.navigateTo({
					url: `/pages/product/list?fid=${goodsId}`,
				});
			},
			async getGoodsList(typeId) {
				this.goodsList2 = []
				let ret = await goodsListApi({
					typeId,
					merId: 1,
					shopId: 1,
					level: 0
				})
				this.goodsList = ret.data
				if(this.currentGoodsId) {
					this.getGoodsList2(this.currentGoodsId)
				}
			},
			async getGoodsList2(parentId) {
				this.currentGoodsId = parentId
				this.goodsSizeList = []
				let ret = await goodsListApi({
					parentId,
					merId: 1,
					shopId: 1
				})
				this.goodsList2 = ret.data
			},
			async getGoodsSizeList(goodsId) {
				let ret = await goodsSizeListApi({
					goodsId
				})
				if (ret && ret.code == 200) {
					this.goodsSizeList = ret.data
				} else {
					this.slist = [{
						goodsId,
						name: 'xxx' + goodsId,
						desc: '',
						picture: '',
						price: ''
					}]
				}
			},
			searchByGoodsName(name) {
				console.log(name);
			},
			async add2Cart(goods) {
				let goodsSizeList = goods.sizeResponseList
				if (goodsSizeList) {
					if(goodsSizeList.length > 1) {
						// this.$api.msg('请选择规格');
						uni.navigateTo({
							url: `/pages/product/list?fid=${goods.id}`,
						});
					}else if (goodsSizeList.length == 0) {
						this.$api.msg('请添加规格');
					} else {
						let ret = await add2CartApi({
							customerId: this.userInfo.id,
							goodsId: goods.id,
							goodsSizeId: goodsSizeList[0].id
						})
						this.$api.msg('添加到购物车');
					}
				}
			}
		},
	};
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		border-radius: 32rpx;
		background-color: white;
	}

	.header {
		.search-box {
			width: 320upx;
			height: 60upx;
			background-color: #fff;
			border-radius: 32upx;
			border: 1upx solid #3eb3f3;
		}

		.cate-container {
			image {
				width: 112upx;
				height: 106upx;
				border-radius: 50%;
			}
		}

		.cate-section-line1 {
			display: flex;
		}

		.cate-section-line2 {
			display: flex;
			flex-wrap: wrap;
			background-color: #fff;

			.cate-item {
				max-width: 15%;
			}
		}

		.cate-section {
			display: flex;
			overflow-y: auto;
			scrollbar-width: none;
		}

		.cate-item {
			width: 200upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			margin: 12upx;
			padding: 20upx 0;
			color: #23242e;
		}
	}

	.content {
		min-height: 600upx;
		max-height: 80vh;
		border-radius: 16upx;
		display: flex;
	}

	.left-aside {
		width: 200upx;
		height: 100%;
		background-color: #f5f5f9;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #ffffff;

			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: 0.8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: "";
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		.t-img-box {
			width: 180upx;
			height: 180up;

			image {
				width: 140upx;
				height: 140upx;
			}
		}
		.t-info-box{
			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #23242E;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}
		}

	}

	.add-to-cart {
		margin-left: 150upx;
		width: 36upx;
		height: 36upx;
	}
</style>